<template>
  <el-dialog
    v-model="isVisible"
    class="skin-dialog inner-dialog"
    :align-center="true"
    width="374px"
  >
    <template #header>
      <span class="xz-confirm-title">
        <svg-icon :iconClass="appCfg.logo" />
        {{ appCfg.name }}
      </span>
    </template>
    <div class="flex-center center">
      <svg-icon iconClass="vip" className="fs24" />
      <div class="fs16 fb ml5" style="color: #a87700">{{ info.text }}</div>
    </div>
    <div class="text-center fs12 color-primary mt10">{{ info.msg }}</div>
    <img :src="imgSrc" class="qr-img" />
  </el-dialog>
</template>
<script setup lang="ts">
import { defineProps, ref, defineEmits, computed, onMounted } from "vue";
import { storeToRefs } from "pinia";
import { systemAppStore } from "@/stores/system";
import { getWeChatImg } from "@/utils/costum";
const emit = defineEmits(["update:modelValue"]);
const _systemAppStore_ = systemAppStore();
const { appCfg } = storeToRefs(_systemAppStore_);
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: "vip"
  }
});
const imgSrc = ref(getWeChatImg());
const info = computed(() => {
  let text = "恭喜您成为VIP!";
  let msg = "扫码加入VIP微信群，第一时间响应您的需求！";
  if(props.type ==='tsb'){
    text = "恭喜您购买翻译币成功!"
    msg =  "加入官方用户群参与不定期抽奖活动!" 
  }else if(props.type ==='renewal'){
    text = "恭喜您续费成功!"
  }
  return {
    text,
    msg
  }
});
const isVisible = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("update:modelValue", val);
  }
});
</script>
<style lang="scss" scoped>
.qr-img {
  display: block;
  width: 150px;
  height: 150px;
  margin: 20px auto;
}
</style>
